<template>
  <div class="box">
    <singer-list ref="singerDome" @scroll-fixed="scrollFixed" @scroll-top="_scrollTop" @scroll-list="_scrollList" @select-singer="selectSinger" :touch-index="touchIndex" :data-list="singerList"></singer-list>
    <div class="nav-list" @touchstart="_touchNav" @touchmove.stop.prevent="_touchNavMove">
      <ul>
        <li class="list" :class="touchIndex==index ? 'active':''" v-for="(item,index) in singerList" :key="index" :data-index="index">{{item.name}}</li>
      </ul>
    </div>
    <div class="title" ref="fixedTitleEl" v-show="fixedTitle">
      {{fixedTitle}}
    </div>
    <transition name="slide" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import {ERR_OK} from '../../api/config'
import {getSinger} from '../../api/singer'
import Singer from '../../common/js/singer'
import singerList from '../../base/singer-list/singer-list'
import {getData} from '../../common/js/main'
import {mapMutations} from 'vuex'

let LENG = 10
let HOT_NAME = '热门'
export default {
  data() {
    return {
      singerList: [],
      scroll: null,
      touchIndex: '0',
      fixedTitle: null,
      fixed: '0px'
    }
  },
  created() {
    this._getSinger()
    this.scroll = this.$refs.scroll
    this.touch = {}
  },
  methods: {
    _getSinger() {
      getSinger().then((res) => {
        if (res.code === ERR_OK) {
          this._rewriteSinger(res.data.list)
        }
      })
    },
    _rewriteSinger (list) {
      const map = {
        hot: {
          name: HOT_NAME,
          list: []
        }
      }
      list.forEach((item, index) => {
        if (index < LENG) {
          map.hot.list.push(new Singer(item.Fsinger_mid, item.Fsinger_name))
        }

        let key = item.Findex
        if (!map[key]) {
          map[key] = {
            name: key,
            list: []
          }
        }
        map[key].list.push(new Singer(item.Fsinger_mid, item.Fsinger_name))
      })
      let hot = []
      let ret = []
      for (let key in map) {
        let val = map[key]
        if (/[a-zA-Z]/.test(val.name)) {
          ret.push(val)
        } else if (val.name === HOT_NAME) {
          hot.push(val)
        }
      }
      ret.sort(function (a, b) {
        return a.name.charCodeAt(0) - b.name.charCodeAt(0)
      })
      this.singerList = hot.concat(ret)
      // console.log(this.singerList)
    },
    _touchNav(e) {
      this.touchIndex = getData(e.target, 'index')
      let index = getData(e.target, 'index')
      let firstTouchY = e.touches[0].clientY
      this.touch.firstTouchY = firstTouchY
      this.touch.index = index
      setTimeout(() => {
        this.$refs.singerDome._touchJump()
      }, 100)
    },
    _touchNavMove(e) {
      let secondTouchY = e.touches[0].clientY
      this.touch.secondTouchY = secondTouchY
      let delta = Math.floor((this.touch.secondTouchY - this.touch.firstTouchY) / 18)
      let index = (Number.parseInt(this.touch.index) + delta).toString()
      if (index < 0) {
        index = '0'
      } else if (index > this.singerList.length) {
        index = (this.singerList.length - 1).toString()
      }
      this.touchIndex = index
      setTimeout(() => {
        this.$refs.singerDome._touchJump()
      }, 100)
    },
    _scrollList (index) {
      // console.log(index)
      this.touchIndex = index.toString()
    },
    _scrollTop (pro) {
      // console.log(pro)
      if (pro.y > 0) {
        this.fixedTitle = null
      } else {
        this.fixedTitle = this.singerList[this.touchIndex].name
      }
    },
    scrollFixed (top) {
      if (top < 30) {
        this.fixed = ((top - 30)) + 'px'
      } else {
        this.fixed = 0 + 'px'
      }
    },
    selectSinger (item) {
      this.$router.push({
        path: `/singer/${item.id}`
      })
      this.setSinger(222)
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    })
  },
  watch: {
    fixed () {
      this.$refs.fixedTitleEl.style.top = this.fixed
    }
  },
  components: {
    singerList
  }
}
</script>

<style scoped lang="stylus">
  @import "../../common/styles/variable.styl"
  .box{
    position fixed;
    width 100%;
    top: 44px;
    bottom 0px;
    overflow hidden
  }
  .title{
    position absolute;
    width 100%;
    height 30px;
    line-height: 30px;
    font-size $font-size-small
    color $color-text-d
    background-color #333;
    padding 0 20px;
    top:0px;
  }
  .nav-list{
    position absolute;
    top: 50%;
    right 0;
    width 18px;
    transform translateY(-50%)
    background-color $color-background-d
    font-size $font-size-small
    text-align center
    padding 20px 0;
    border-radius 10px;
    z-index 99;
    .list{
      height 18px;
      width 20px;
      line-height 18px;
      text-align center;
      color $color-text-l;
      overflow hidden;
      font-size $font-size-small
      &.active{
        color $color-theme
      }
    }
  }
  .slide-enter-active, .slide-leave-active {
    transition: all .3s;
  }
  .slide-enter, .slide-leave-to{
    transform translate3d(100%, 0, 0)
  }
</style>
